$(function () {
  //把ajax参数定义为全局变量
  let q = {
    pagenum: 1,
    pagesize: 5,
    cate_id: '',
    state: '',
  }


  let layer = layui.layer
  // 根据参数渲染文章列表
  initArticleList()
  //封装函数
  function initArticleList() {
    //发送ajax
    axios({
      method: 'GET',
      url: '/my/article/list',
      // GET 请求 params  POST 请求 data
      params: q
    }).then(function (res) {
      console.log(res.data.data)
      if (res.data.status !== 0) {
        return layer.msg(res.data.message)
      }

      let array = []
      res.data.data.forEach(element => {
        array.push(`
        <tr>
          <td>${element.title}</td>
          <td>${element.cate_name}</td>
          <td>${todayTime(element.pub_date)}</td>
          <td>${element.state}</td>
          <td>
            <a href="/article/art_edit.html?id=${element.Id}" class="btn-edit layui-btn layui-btn-xs">编辑</a>
            <button data-id=${element.Id} class="btn-del layui-btn layui-btn-xs layui-btn-danger">删除</button>
          </td>
        </tr>
        `)
      })
      //循环创建好之后赋值
      $('tbody').empty().html(array.join(''))
      renderPage(res.data.total)
    })
  }

  // 渲染文章分类
  initArtName()
  let form = layui.form
  function initArtName() {
    axios({
      method: 'GET',
      url: '/my/article/cates'
    }).then(function (res) {
      // console.log(res);
      if (res.data.status !== 0) {
        return layer.msg(res.data.message)
      }

      let arr = [`<option value="">请选择文章类别</option>`]
      //遍历
      res.data.data.forEach(element => {
        arr.push(`
                <option value="${element.Id}">${element.name}</option>
            `)
      })
      //接收拼接后的字符串
      let str = arr.join('')
      // console.log(str);
      //成功后渲染
      $('[name=cate_id]').empty().html(str)
      // 动态创建的表单需要渲染时使用 form.render(type,filter())更新表单
      // 默认更新全部 也可以在type选择更新的部分
      form.render()
    })
  }

  // 筛选
  $('#searchForm').on('submit', function (e) {
    e.preventDefault()
    // q 的属性需要根据表单值进行修改
    q.cate_id = $('[name=cate_id]').val()
    q.state = $('[name=state]').val()
    // 重新渲染文章列表
    initArticleList()
  })

  // 重置
  $('#searchForm').on('reset', function (e) {

    q.cate_id = ''
    q.state = ''
    // 重新渲染文章列表
    initArticleList()
  })

  //分页

  function renderPage(total) {
    let laypage = layui.laypage
    laypage.render({
      elem: 'pageBox',//分页容器
      count: total,//数据总数
      limit: q.pagesize,//每页显示多少条
      curr: q.pagenum,//默认第几页

      // layout 自定义排版 默认值 ['prev', 'page', 'next']
      layout: ['count', 'limit', 'prev', 'page', 'next'],
      // limits 每页条数的选择项。如果 layout 参数开启了 limit，则会出现每页条数的select选择框
      // 默认值 [10, 20, 30, 40, 50]
      limits: [2, 3, 5, 10],

      // 页面加载的时候,触发页码切换,每页显示条数会触发
      jump: function (obj, first) {
        //obj包含了当前分页的所有参数
        // console.log(obj, curr) 当前页
        // console.log(obj, limit) 每页显示条数
        //首次不执行
        if (!first) {
          //当前页改变,重新渲染文章列表
          q.pagenum = obj.curr
          q.pagesize = obj.limit
          initArticleList()
        }
      }
    })
  }


  //删除文章
  $('tbody').on('click', '.btn-del', function () {
    let id = $(this).attr('data-id')
    layer.confirm('是否删除？', { icon: 3, title: '提示' }, function (index) {
      // 发送ajax 
      axios({
        method: 'GET',
        url: '/my/article/delete/' + id,
      }).then(function (res) {
        if (res.data.status !== 0) {
          return layer.msg(res.data.message)
        }
        layer.msg('删除文章成功！')

        // 短路运算优化bug
        // 每次刷新 页面都要判断页码是否需要减一
        // 在每一页删除到只剩一个数据时就减一
        $('.btn-del').length == 1 && q.pagenum > 1 && q.pagenum--


        initArticleList()
      })
      layer.close(index);
    })

  })
})

